<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/tag_lib.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>스프링 테스트 예제</title>
		<script type="text/javascript">
		    // Google Maps
			function initialize() {      
	            if (GBrowserIsCompatible()) {        
	                var map = new GMap2(document.getElementById("map_canvas"));
	                var point = new GLatLng(37.4993106, 127.0352316);        
	                map.setCenter(point, 17);        
	                map.setUIToDefault();
	
	                var marker = createMarker(point,'유젠<br /><a href="http://www.uzen.net">http://www.uzen.net</a>'); 
	                map.addOverlay(marker);
	                // marker.openInfoWindowHtml("<font color='red'>UZEN!</font>");
	                map.setUIToDefault();
	                map.enableGoogleBar();
	                

	                GEvent.addListener(map, "click", function(overlay,latlng) {
	                    if (latlng) {
	                      var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
	                      myHtml = myHtml + "<br /><a href=\"javascript:setMapValue('" + latlng + "');\">보내기</a>" + latlng;
	                      map.openInfoWindow(latlng, myHtml);
	                    }
	                  });

	                  
	            } else {
	                alert("Sorry, the Google Maps API is not compatible with this browser");
	            }
	        }    
	
	        function createMarker(point, html) {
	            var marker = new GMarker(point);
	            GEvent.addListener(marker, "click", 
	                    function() {
	                        marker.openInfoWindowHtml(html);
	                    }
	            );
	            return marker;
	        }
	
	        function search() {
	            var address = document.getElementById("address").value; 
	            var map = new GMap2(document.getElementById("map_canvas"));
	            var geocoder = new GClientGeocoder();
	            geocoder.getLatLng(address, 
	                    function (point){
	                        if (!point) {
	                            alert(address + " not found");
	                        } else { 
	                            map.setCenter(point, 18);
	                            map.setUIToDefault();
	                            
	                            var marker = new GMarker(point);
	                            map.addOverlay(marker);
	                            marker.openInfoWindowHtml(address)
	                        }
	                    }
	            );
	        }

	        function setMapValue(latlng) {
	            $("#attachedLocation").val(latlng);
	        }
	        
	        
	        // jQuery 
	        $(document).ready(function () {
	        	// initialize();
	        	
			    $("#addFile").click(function () {
			      $("#attached").append("<input type='file' name='' id='' />");
			    });

			    $("#addMap").click(function () {
				    alert("addMap");
				    // $("#attached").append();
			    });

			    $("#getSize").click(function () {
				    $.getJSON('http://api.flickr.com/services/rest/?', 
					    {'api_key' : '03f3fab85e2cd28de1fb969b320768bc',
					     'method' : 'flickr.photos.getSizes',
	                     'photo_id' : '4175667707',
	                     'format' : 'json'} ,
	                    function (data) { alert(1); })});
			});

	        function getPhotoList() {
		        var flickr =  document.getElementById("flickr");
		        var action = flickr.action + "api_key=03f3fab85e2cd28de1fb969b320768bc&method=" + flickr.methods.value + "&photo_id=4175667707";
		        alert(action);
		        flickr.action = action;
		        $("#list").load(action);
	        }

	        function getLoad() {
		        var action = "http://api.flickr.com/services/rest/?";
		        var action = "http://api.flickr.com/services/rest/?format=json&api_key=03f3fab85e2cd28de1fb969b320768bc&method=flickr.photos.getSizes&photo_id=4175667707&jsoncallback=?";
		        $.getJSON(action, 
			        function(data) {
		                $.each(data.sizes.size, function(index, each2) {
			                alert(index);
			                alert(each2);
		                	$("#list").append(each2['label'] + '<img src=\"' + each2['source'] + '\" />');
		                });
			            //for(i = 0; i < data.sizes.size.length; i++ ) {
				        //    var each = data.sizes.size[i];
				        //    $("#list").append(each.label + '<img src=\"' + each.source + '\" />');
			            //} 

			        });
		        //return false;
	        }

	        function upload() {
		        var authUrl = " http://flickr.com/services/auth/?api_key=03f3fab85e2cd28de1fb969b320768bc&perms=read&api_sig=2f3870be274f6c49b3e31a0c6728957f"; 
		        var auth = 
	            alert(1);
	        }
		</script>
	</head>
	<body onunload="GUnload()">
	    Test<br/>
	    <form id="flickr" action="http://api.flickr.com/services/rest/?" onSubmit="return false;">
	        <input type="hidden" id="methods" value="flickr.photos.getSizes" />
	        <input type="hidden" id="format" value="" />
	    </form>
        <hr />
        <a href="javascript:getPhotoList();">Get Photo List</a>
        <div id="list"></div>
        <a href="http://api.flickr.com/services/rest/?api_key=03f3fab85e2cd28de1fb969b320768bc&method=flickr.photos.getSizes&photo_id=4175667707">링크로 연결</a><br />
        <a href="javascript:getLoad();">자바스크립트 링크로 연결</a>
        <span id="getSize">자바스크립트 링크로 연결2</span>
        <hr />
        .사진등록
        <hr />
        <form:form commandName="article" action="./uploadPhoto2.jude" >
            .파일 <input type="file" name="photo" /><br />
            <button>제출</button>
        </form:form>
	</body>
</html>